<!--
 * @Description: 购物车
 * @Author: rendc
 * @Date: 2023-03-09 17:00:06
 * @LastEditors: 方雨淳 1768339162@qq.com
 * @LastEditTime: 2023-03-19 10:59:20
-->
<script setup>
import {ref} from "vue"
import { areaList } from '@vant/area-data';
const onClickLeft = () => {
history.go(-1);
};
const show=ref(false);
</script>

<template>


<div class="shoppingCar">
    <van-nav-bar
    title="购物车"
    left-arrow
    @click-left="onClickLeft"
    /> 
	<div style="font-size: 14px; color: #8A8A8F; height: 50px;margin-top: 16px; float: left;" @click="show = true"><van-icon name="location-o" />
    广州市天河区</div>

<div >
	
<van-popup v-model:show="show"  round
position="bottom"
:style="{ height: '40%' }" >
<van-area  :area-list="areaList" value="110101" />
</van-popup>
</div>




    <!-- 当前用户未登录 -->
    <div class="notLogin" style="margin-top: 70px;">
    
    <div style="color: #808080; font-size:12px ;">
            购物车还是空的，快去挑选商品吧~ </div>
    </div>


    <!-- 为你推荐 -->
    <div class="recommend">
    <div class="recommendTitle">
        <van-icon name="src/assets/xtb1.png"  size="25"/>
        <div style="color: #333333; font-size:16px ;font-weight:bolder">为你推荐</div>
    </div>
</div>
</div>




<!-- 宫格 -->
<div style="margin-top: 10px;">
	<van-grid :column-num="2" :center="false" :gutter="10" :border="true">

<van-grid-item  to="info">
	<div><van-tag type="warning" >官方正品</van-tag>
	<van-tag type="primary" color="#333333">PRO精选</van-tag></div>
	<van-image
width="123.99"
height="123.99"
src="https://pic.midea.cn/smartpic/pic/106732696ead6508da05a9113e.jpg"
/>
<div style="margin-bottom: 15px;">美的风尊1.5匹一级能效智能变频冷暖空调  时尚版</div>

<div>
	<div style="float: left;">
    <div style="color: #FF6600;font-size: 18px;">￥2999</div>
	<p style="color: #333333; font-size:14px ;">¥2939 <van-tag type="primary" color="#333333">PRO</van-tag></p>
	</div>
	<van-button  icon="cart-o"  round type= "primary" size="small" style="float: right;" />
	
</div>
</van-grid-item>



<van-grid-item  to="info">
	<div><van-tag type="warning" >官方正品</van-tag>
	<van-tag type="primary" color="#333333">PRO精选</van-tag></div>
	<van-image
width="123.99"
height="123.99"
src="https://pic.midea.cn/smartpic/pic/1064d4184817c2700a66dc539d.jpg"
/>
<div style="margin-bottom: 15px;">【轻奢柜机】美的风尊大风口一级能效3匹变频冷暖空调智能柜机</div>

<div>
	<div style="float: left;">
    <div style="color: #FF6600;font-size: 18px;">￥6999</div>
	<p style="color: #333333; font-size:14px ;">¥6859 <van-tag type="primary" color="#333333">PRO</van-tag></p>
	</div>
	<van-button  icon="cart-o" round type= "primary" size="small" style="float: right;" />
	
</div>
</van-grid-item>


<van-grid-item  to="info">
	<div><van-tag type="warning" ></van-tag>
	<van-tag type="primary" color="#333333"></van-tag></div>
	<van-image
width="123.99"
height="123.99"
src="https://pic.mdcdn.cn/pc/pic/202303/31bf440b1710186fb8c0391bb644bb60.jpg"
/>
<div style="margin-bottom: 15px;">创维电视 50A2 50英寸 4K超高清护眼无屏闪电视 智能语音教育</div>

<div>
	<div style="float: left;">
    <div style="color: #FF6600;font-size: 18px;">￥1399</div>
	<p style="color: #333333; font-size:14px ;"><van-tag type="primary" color="#333333"></van-tag></p>
	</div>
	<van-button  icon="cart-o" round type= "primary" size="small" style="float: right;" />
	
</div>
</van-grid-item>



<van-grid-item  to="info">
	<div><van-tag type="warning" >会员日</van-tag>
	<van-tag type="primary" color="#333333">PRO精选</van-tag></div>
	<van-image
width="123.99"
height="123.99"
src="https://dsdcp.smartmidea.net/mcsp/prod/20221121/1c6aa336967a4b94b747aaf47ca74f77.jpg?x-oss-process=image/resize,limit_0,w_280,h_280"
/>
<div style="margin-bottom: 15px;">【新品】美的直排式4KG迷你滚筒式烘干机干衣机紫外线除菌</div>

<div>
	<div style="float: left;">
    <div style="color: #FF6600;font-size: 18px;">￥899</div>
	<p style="color: #333333; font-size:14px ;">¥872 <van-tag type="primary" color="#333333">PRO</van-tag></p>
	</div>
	<van-button  icon="cart-o" round type= "primary" size="small" style="float: right;" />
	
</div>
</van-grid-item>




<van-grid-item  to="info">
	<div><van-tag type="warning" >官方正品</van-tag>
	<van-tag type="primary" color="#333333">PRO精选</van-tag></div>
	<van-image
width="123.99"
height="123.99"
src="https://pic.mdcdn.cn/pc/pic/202303/58224482d529f70134ebff7ee28bba1a.jpg"
/>
<div style="margin-bottom: 15px;">【60厘米超薄】新品十字门冰箱483L 全空间PT净味微缝嵌入</div>

<div>
	<div style="float: left;">
    <div style="color: #FF6600;font-size: 18px;">￥6199</div>
	<p style="color: #333333; font-size:14px ;">¥6299 <van-tag type="primary" color="#333333">PRO</van-tag></p>
	</div>
	<van-button  icon="cart-o" round type= "primary" size="small" style="float: right;" />
	
</div>
</van-grid-item>





<van-grid-item  to="info">
	<div><van-tag type="warning" >会员日</van-tag>
	<van-tag type="primary" color="#333333">PRO精选</van-tag></div>
	<van-image
width="123.99"
height="123.99"
src="https://dsdcp.smartmidea.net/mcsp/prod/20230222/05d3fa71a5414daf93e705d7c63eb123.jpg?x-oss-process=image/resize,limit_0,w_280,h_280"
/>
<div style="margin-bottom: 15px;">【洗烘套装】小天鹅洗衣机热泵烘干机干衣组合</div>

<div>
	<div style="float: left;">
    <div style="color: #FF6600;font-size: 18px;">￥6199</div>
	<p style="color: #333333; font-size:14px ;">¥6299 <van-tag type="primary" color="#333333">PRO</van-tag></p>
	</div>
	<van-button  icon="cart-o" round type= "primary" size="small" style="float: right;" />
	
</div>
</van-grid-item>





<van-grid-item  to="info">
	<div><van-tag type="warning" >厨卫热卖</van-tag>
	<van-tag type="primary" color="#333333">PRO精选</van-tag></div>
	<van-image
width="123.99"
height="123.99"
src="https://pic.midea.cn/smartpic/pic/106943151169eb64f879b5768a.jpg"
/>
<div style="margin-bottom: 15px;">【年度绿电好物】美的 燃气热水器 节能零冷水 一级能效 WIFI智控 16LN3</div>

<div>
	<div style="float: left;">
    <div style="color: #FF6600;font-size: 18px;">￥2299</div>
	<p style="color: #333333; font-size:14px ;">¥2207 <van-tag type="primary" color="#333333">PRO</van-tag></p>
	</div>
	<van-button  icon="cart-o" round type= "primary" size="small" style="float: right;" />
	
</div>
</van-grid-item>






<van-grid-item  to="info">
	<div><van-tag type="warning" >官方直营</van-tag>
	<van-tag type="primary" color="#333333">PRO精选</van-tag></div>
	<van-image
width="123.99"
height="123.99"
src="https://pic.midea.cn/smartpic/pic/106d25d51064167b349329befe.png"
/>
<div style="margin-bottom: 15px;">【Hot】电饭煲 4L容量 高端优雅 18分钟热水快煮 智能预约 立体IH大火加热 </div>

<div>
<div style="float: left;">
<div style="color: #FF6600;font-size: 18px;">￥389</div>
<p style="color: #333333; font-size:14px ;">¥369 <van-tag type="primary" color="#333333">PRO</van-tag></p>
</div>
<van-button  icon="cart-o" round type= "primary" size="small" style="float: right;" />

</div>
</van-grid-item>

</van-grid>
</div>


<van-submit-bar
disabled
:price="0"
button-text="结算（0）"
button-color="#808080"
decimal-length=""
@submit="onSubmit">
</van-submit-bar>



<!-- 在 head 标签中添加 meta 标签，并设置 viewport-fit=cover 值 -->
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
/>
<!-- 开启底部安全区适配 -->
<van-number-keyboard safe-area-inset-bottom />





</template>





<style lang="less" scoped>
:deep(.van-nav-bar__title) {
font-size: 18px;
color: rgba(0, 0, 0, 0.8);
}
:deep(.van-icon-arrow-left) {
color: #777777;
}
.shoppingCar {
background-color: rgb(242, 242, 242);
}
.notLogin {
text-align: center;
padding-bottom: 40px;
img {
    width: 90px;
    height: 90px;
    padding-top: 40px;
}

}
.recommend {
.recommendTitle {
    display: flex;
	color:rgba(0, 0, 0, 0.8);
    justify-content: center;
    margin-bottom: 24px;
    img {
    width: 18px;
    }
    
}
}
</style>
